<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<head>
    <meta charset="UTF-8">
    <title>注册用户-浮生若梦</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/reg.js" charset="UTF-8"></script>
    <style>
        .formstyle {
            background-color: white;
            opacity: 0.7;
            padding: 50px;
            border-radius: 15px;
        }

        .col-center-block {
            position: absolute;
            top: 70%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        body {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background: url("img/nier-gaosi.jpg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /*.beijing {
            width: 100%;
            height: 140%;
            position: absolute;
            left: 0px;
            top: 0px;
            background: url("img/nier-gaosi.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            !*-webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);*!
            filter: blur(2px);
        }*/

        a:hover {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div th:replace="part/nav :: nav"></div>
<div class="col-md-4 col-lg-4 col-lg-offset-4 col-md-offset-4 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2 col-center-block formstyle" >
    <div align="center">
        <h3><b>用户注册</b></h3>
    </div>
    <div id="message" align="center">&nbsp</div>
    <form method="post" action="/register.htm" id="regForm" enctype="multipart/form-data">
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon" id="name">你的昵称</span>
            <input type="text" name="userName" id="userName" class="form-control" placeholder="这将作为你的用户名称"
                   aria-describedby="sizing-addon1" onchange="isName()">
        </div>
        <div class="form-group input-group input-group-lg" style="height: 50%">
            <span class="input-group-addon" id="email">你的邮箱</span>
            <span>
                <input type="email" id="userEmail" name="userEmail" class="form-control form-horizontal"
                       placeholder="点击验证按钮向这个邮箱发送验证码"
                       aria-describedby="sizing-addon1" onchange="isEmail()">
                <a class="form-control form-horizontal btn btn-default" onclick="sendEmail()">验证</a>
            </span>
        </div>
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon" id="pwd1">你的密码</span>
            <input type="password" name="userPassword" id="userPassword" class="form-control" placeholder="这将作为你账号的密码"
                   aria-describedby="sizing-addon1" onchange="isPwd1()">
        </div>
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon" id="pwd2">确认密码</span>
            <input type="password" name="verUserPassword" id="verUserPassword" class="form-control"
                   placeholder="请再次输入你的密码"
                   aria-describedby="sizing-addon1" onchange="isPwd2()">
        </div>
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon" id="updatePicSpan">上传头像</span>
            <input type="file" id="updatePic" name="updatePic" class="form-control" aria-describedby="sizing-addon1"
                   value="1">
        </div>
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon" id="gender">你的性别</span>
            <div class="form-control radio-button">
                <!--<label class="radio-primary col-center-block">-->
                <input type="radio" name="userGender" checked="checked" value="1">男
                <input type="radio" name="userGender" value="0">女
                <!--</label>-->
            </div>
        </div>
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon" id="birthday">你的生日</span>
            <input type="date" name="userBirthday" id="userBirthday" class="form-control"
                   placeholder="请输入你的生日"
                   aria-describedby="sizing-addon1">
        </div>
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon" id="detail">个人描述</span>
            <textarea name="userDetail" placeholder="描述一下你自己吧" class="form-control" aria-describedby="sizing-addon1"
                      style="resize: none"></textarea>
        </div>
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon" id="verify">邮箱验证</span>
            <input type="text" name="verifyCode" id="verifyCode" class="form-control" placeholder="请输入邮箱验证码"
                   aria-describedby="sizing-addon1" onchange="verifyCodeF()">
        </div>

        <div align="center">
            <button type="button" class="btn btn-default" th:text="#{login.reg}" onclick="isReg()"></button>
            <button type="reset" class="btn btn-default" th:text="#{login.reset}"></button>
        </div>
    </form>
</div>
<script>
    var isTrue = 1;
    var isRightFormat = 1;
    $("#updatePic").change(function () {
        //检验非空和文件大小
        if ($(this).val() == '' || checkSize(this)) {
            //其他操作
            if (isRightFormat == 0) {
                isTrue = 0;
                $("#message").text("文件类型不正确，请使用png、jpg类型");
                $("#updatePicSpan").css({'border': "1px  solid  red"});
                return false;
            }
            isTrue = 1;
            $("#message").text("文件太大小很合理😀");
            $("#updatePicSpan").css({'border': "1px  solid  #669933"});
            return true;
        } else {
            isTrue = 0;
            $("#message").text("文件太大了，请不要超过10M😭");
            $("#updatePicSpan").css({'border': "1px  solid  red"});
            return false;
        }
    });

    /**
     * 函数：检查上传文件大小
     * 输入：input的js对象
     * 输出：
     **/
    var userAgent = navigator.userAgent;

    function checkSize(input) {
        var Sys = {};
        var flag;
        var filesize = 0;
        var filetype = "png";

        //判断浏览器种类
        if (userAgent.indexOf("MSIE") > 0 || userAgent.indexOf("rv:11.0") > 0) {
            Sys.ie = true;
        }
        if (userAgent.indexOf("Firefox") > 0) {
            Sys.firefox = true;
        }
        if (userAgent.indexOf("Chrome") > 0) {
            Sys.Chrome = true;
        }


        //获取文件大小
        if (Sys.firefox || Sys.Chrome) {
            filesize = input.files[0].size;
            filetype = input.files[0].name.substr(input.files[0].name.lastIndexOf("."));
        } else if (Sys.ie) {
            var fileobject = new ActiveXObject("Scripting.FileSystemObject");//获取上传文件的对象(ie11会弹框确认ActiveX的安全问题，确认即可；)
            var file = fileobject.GetFile(input.value);//获取上传的文件
            filesize = file.Size;//文件大小
        }

        console.log(filetype);
        //判断是否符合要求c
        if (filesize / (1024 * 1024) < 10) {
            if (filetype == ".png" || filetype == ".jpg" || filetype == ".jpeg") {
                isRightFormat = 1;
            } else {
                isRightFormat = 0;
            }
            flag = true;
        } else {
            flag = false;
        }
        return flag;
    }

    function isReg() {
        if (isName() && isEmail() && isPwd1() && isPwd2() && verifyCodeF() && isTrue == 1 && isRightFormat == 1)
            document.getElementById("regForm").submit();
        else {
            if (isTrue == 0) {
                $("#message").text("文件太大了，请不要超过10M😭");
            }
            if (isRightFormat == 0) {
                $("#message").text("请使用png、jpg或jpeg格式的图片");
            }
            alert("你的注册表好像有点问题😅");
        }
    }
</script>
</body>
</html>